<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 350px;
            margin: 20px auto 5px;
        }
        h3{
            border: 1px solid #999999;
            padding: 5px 205px 5px 10px;
            cursor: pointer;
        }
        ul{
            list-style-type: none;
            border: 1px solid #999999;
            border-top:none;
            border-bottom: none;
        }
        ul li{
            height: 30px;
            padding-left: 10px;
            border-bottom: 1px solid #999999;
            line-height: 30px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="box">
        <h3 id="list_title1">教育博文1</h3>
        <ul id="list1">
            <li>靠自己95 后女生被16 所国外名校录取</li>
            <li>00 后的成长烦恼：压力巨大成隐形杀手</li>
            <li>一年自学MIT 的33 门课? 疯狂学习方法</li>
            <li>一年自学MIT 的33 门课? 疯狂学习方法</li>
            <li>申请赴美读研人数下降5% 7 年来首遇冷</li>
        </ul>
    </div>
    <div class="box">
        <h3 id="list_title2">教育博文2</h3>
        <ul id="list2">
            <li>靠自己95 后女生被16 所国外名校录取</li>
            <li>00 后的成长烦恼：压力巨大成隐形杀手</li>
            <li>一年自学MIT 的33 门课? 疯狂学习方法</li>
            <li>一年自学MIT 的33 门课? 疯狂学习方法</li>
            <li>申请赴美读研人数下降5% 7 年来首遇冷</li>
        </ul>
    </div>
    <div class="box">
        <h3 id="list_title3">教育博文3</h3>
        <ul id="list3">
            <li>靠自己95 后女生被16 所国外名校录取</li>
            <li>00 后的成长烦恼：压力巨大成隐形杀手</li>
            <li>一年自学MIT 的33 门课? 疯狂学习方法</li>
            <li>一年自学MIT 的33 门课? 疯狂学习方法</li>
            <li>申请赴美读研人数下降5% 7 年来首遇冷</li>
        </ul>
    </div>
</body>
</html>
<script>
    function get(id){
        return document.getElementById(id);
            }
    get("list_title1").onclick = function(){
        if(get("list1").style.display == "none"){
            get("list1").style.display = "block"
        }
        else{
            get("list1").style.display = "none"
        }
    };
    get("list_title2").onclick = function(){
        if(get("list2").style.display == "none"){
            get("list2").style.display = "block"
        }
        else{
            get("list2").style.display = "none"
        }
    };
    get("list_title3").onclick = function(){
        if(get("list3").style.display == "none"){
            get("list3").style.display = "block"
        }
        else{
            get("list3").style.display = "none"
        }
    }

</script>